<template>
  <div class="home">
    <!-- 轮播图 -->
    <swiper :options="swiperOption" v-if="ads.length>0">
      <swiper-slide v-for="ad in ads" :key="ad._id">
        <router-link :to="ad.url" tag="img" class="w-100" :src="ad.img"/>
      </swiper-slide>
      <div class="home-pagination swiper-pagination text-right px-3 pb-2" slot="pagination"></div>
    </swiper>
    <!-- 导航 -->
    <div :class="`nav-icons d-flex flex-wrap bg-white text-dark-1 mt-3 pt-3 ${isHidden ? 'hidden' : ''}`">
      <div class="nav-item d-flex flex-column jc-around ai-center py-3" v-for="(item, index) in nav" :key="index">
        <i :class="'sprite sprite-'+item.name"></i>
        <div>{{item.text}}</div>
      </div>
      <div class="bg-light w-100 text-center py-2 fs-12" @click="isHidden=!isHidden"><i :class="`sprite sprite-xl ${isHidden ? 'rotate180' : ''}`"></i> {{isHidden? ' 展开' : ' 收起'}}</div>
    </div>
    <!-- 新闻 -->
    <tabs-card icon="news" title="新闻资讯" :tabs="newsTabs">
      <template #items="{list}">
        <router-link :to="`/article/${item._id}`" tag="div" class="d-flex fs-12 py-2 my-1" v-for="(item, index) in list.newsList" :key="index">
          <div>
            <span class="newscat text-new_news" v-if="item.categoryName === '新闻'">{{item.categoryName}}</span>
            <span class="newscat text-new_activity" v-if="item.categoryName === '活动'">{{item.categoryName}}</span>
            <span class="newscat text-new_notice" v-if="item.categoryName === '公告'">{{item.categoryName}}</span>
            <span class="newscat text-new_match" v-if="item.categoryName === '赛事'">{{item.categoryName}}</span>
          </div>
          <span class="fs-14 flex-1 mx-2 ellipse">{{item.title}}</span>
          <span>{{item.updatedAt | date}}</span>
        </router-link>
      </template>
    </tabs-card>
    <!-- 英雄 -->
    <tabs-card icon="heros" title="英雄列表" :image="newHero" :tabs="heroesTabs">
      <template #items="{list}">
        <div class="d-flex flex-wrap" style="margin: 0 -0.5rem;">
          <router-link :to="`/hero/${item.ename}`" tag="div" class="p-2 text-center" style="width: 20%;" v-for="(item, index) in list.heroes" :key="index">
            <img :src="item.avatar" class="w-100">
            <div>{{item.name}}</div>
          </router-link>
        </div>
      </template>
    </tabs-card>
    <!-- 视频 -->
    <tabs-card icon="videos" title="精彩视频" :tabs="videosTabs">
      <template #items="{list}">
        <div class="d-flex jc-between flex-wrap">
          <div class="mb-4" style="width:49%;" v-for="(item, index) in list.items" :key="index">
            <img :src="item.img" class="w-100">
            <span class="fs-14 ellipse2 my-2">{{item.title}}</span>
            <div class="video-detail d-flex ai-center">
              <i class="sprite sprite-play mr-1"></i>
              <span class="flex-1">{{item.playnum}}</span>
              <span>{{item.date}}</span>
            </div>
          </div>
        </div>
      </template>
    </tabs-card>
    <div class="video-more bg-white py-2 text-center text-grey fs-12">加载更多内容</div>
  </div>
</template>

<script>
import TabsCard from '../components/TabsCard'
import dayjs from 'dayjs'

export default {
  components: {
    TabsCard
  },
  filters: {
    date (val) {
      return dayjs(val).format('MM/DD')
    }
  },
  data () {
    return {
      swiperOption: {
        loop: true,
        pagination: {
          el: '.home-pagination',
          clickable: true
        },
        autoplay: {
          delay: 2500
        }
      },
      nav: [
        {
          name: 'blz',
          text: '爆料站'
        }, {
          name: 'gsz',
          text: '故事站'
        }, {
          name: 'zbsc',
          text: '周边商城'
        }, {
          name: 'tyf',
          text: '体验服'
        }, {
          name: 'xrzq',
          text: '新人专区'
        }, {
          name: 'rycc',
          text: '荣耀·传承'
        }, {
          name: 'mnz',
          text: '模拟战资料库'
        }, {
          name: 'wzyd',
          text: '王者营地'
        }, {
          name: 'gzh',
          text: '公众号'
        }, {
          name: 'bbjs',
          text: '版本介绍'
        }, {
          name: 'djhj',
          text: '对局环境'
        }, {
          name: 'wxwzt',
          text: '无限王者团'
        }, {
          name: 'cyhdy',
          text: '创意互动营'
        }
      ],
      isHidden: true,
      newHero: {},
      ads: [],
      newsTabs: [],
      heroesTabs: [],
      videosTabs: [
        {
          name: '精品栏目',
          items: new Array(4).fill({}).map(v => ({
            img: 'https://itea-cdn.qq.com/file/tgl/2020070819/de056f266b06e65f703f93c2e787acff.1594207413.9257b40d3b194e2e8624e5fc59630354.1280x720_871634.jpg',
            title: '【王者克制论】三分之地来袭，李九教你快速适应新赛季',
            playnum: '451.1万',
            date: '07-08'
          }))
        }, {
          name: '英雄攻略',
          items: new Array(4).fill({}).map(v => ({
            img: 'https://itea-cdn.qq.com/file/tgl/2020071011/5b56a4201f69bfb3a7695ba52ab9826d.1594350360.5dc75872f3c81dcb80497ebf8f8d8fa8.230x140_72203.png',
            title: '国服鲁班大师：上分难？送你一套顶级连招',
            playnum: '289',
            date: '07-10'
          }))
        }, {
          name: '赛事精品',
          items: new Array(4).fill({}).map(v => ({
            img: 'https://shp.qpic.cn/cfwebcap/0/affd5d5a787861f2a7022d45b7366457/0/?width=230&height=140',
            title: '【王者炸麦了】集结 百炼志问鼎 （下）',
            playnum: '21.2万',
            date: '07-07'
          }))
        }
      ]
    }
  },
  methods: {
    async getAds () {
      const { data: res } = await this.$http.get('/ads')
      this.ads = res[0].items
      this.newHero = res[1].items[0]
    },
    async getNews () {
      const { data: res } = await this.$http.get('news/list')
      this.newsTabs = res
    },
    async getHeroes () {
      const { data: res } = await this.$http.get('hero/list')
      this.heroesTabs = res
    }
  },
  created () {
    this.getAds()
    this.getNews()
    this.getHeroes()
  }
}
</script>

<style lang="less" scope>
.home-pagination {
  /deep/.swiper-pagination-bullet {
    opacity: 1;
    border-radius: .153846rem;
    background-color: #fff;
  }
  /deep/.swiper-pagination-bullet-active {
    background-color: #4b67af;
  }
}
.nav-icons {
  border-top: 1px solid #d4d9de;
  border-bottom: 1px solid #d4d9de;
  .nav-item {
    position: relative;
    width: 25%;
    height: 5.673077rem;
    &::after {
      content: '';
      display: block;
      width: 1px;
      height: 77%;
      background: #d4d9de;
      position: absolute;
      top: 0;
      right: 0;
    }
    &:nth-child(4n)::after {
      display: none;
    }
    .sprite-blz {
      width: 1.769231rem;
      height: 1.538462rem;
      background-position: 63.546% 15.517%;
    }
    .sprite-gsz {
      width: 1.769231rem;
      height: 1.538462rem;
      background-position: 90.483% 15.614%;
    }
    .sprite-zbsc {
      width: 1.461538rem;
      height: 1.692308rem;
      background-position: 36.746% 0.924%;
    }
    .sprite-tyf {
      width: 1.538462rem;
      height: 1.538462rem;
      background-position: 10.408% 15.517%;
    }
    .sprite-xrzq {
      width: 1.538462rem;
      height: 1.615385rem;
      background-position: 89.733% 1.266%;
    }
    .sprite-rycc {
      width: 1.846154rem;
      height: 1.538462rem;
      background-position: 36.467% 15.287%;
    }
    .sprite-mnz {
      width: 2.384615rem;
      height: 1.923077rem;
      background-position: 9.302% 0.813%;
    }
    .sprite-wzyd {
      width: 1.846154rem;
      height: 1.846154rem;
      background-position: 63.3% 0.927%;
    }
    .sprite-gzh {
      width: 1.846154rem;
      height: 1.538462rem;
      background-position: 0 96.207%;
    }
    .sprite-bbjs {
      width: 2.153846rem;
      height: 2.153846rem;
      background: url('https://game.gtimg.cn/images/yxzj/m/m201706/images/bg/version-icon.png') no-repeat;
      background-size: 30px;
    }
    .sprite-djhj {
      width: 3.076923rem;
      height: 1.923077rem;
      background: url('https://game.gtimg.cn/images/yxzj/m/m201706/images/bg/djhj.png') no-repeat;
      background-size: 40px;
    }
    .sprite-wxwzt {
      width: 3.846154rem;
      height: .923077rem;
      background: url('https://game.gtimg.cn/images/yxzj/m/m201706/images/bg/wxwzt.png') no-repeat;
      background-size: 45px;
    }
    .sprite-cyhdy {
      width: 2.692308rem;
      height: 2.461538rem;
      background: url('https://game.gtimg.cn/images/yxzj/m/m201706/images/bg/cyhdy.png') no-repeat;
      background-size: 35px;
    }
  }
  .sprite-xl {
    width: .769231rem;
    height: .769231rem;
    background-position: 38.577% 52.076%;
  }
}
.hidden {
  .nav-item:nth-child(n+5) {
    display: none;
  }
}
.rotate180 {
  transform: rotate(180deg);
  transform: 0.5s;
}
.card {
  .sprite-news {
    width: 1rem;
    height: 1rem;
    background-position: 0.138% 50.452%;
  }
  .sprite-heros {
    width: .923077rem;
    height: 1rem;
    background-position: 46.768% 60.452%;
  }
  .sprite-videos {
    width: 1rem;
    height: .846154rem;
    background-position: 0.138% 56.532%;
  }
}
.newscat {
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 1px;
}
.video-detail {
  .sprite-play {
    width: .923077rem;
    height: .692308rem;
    background-position: 32.369% 52.578%;
  }
}
</style>
